<template>
	<view class="choose">
		<view class="top">
			<view class="search">
				<image src="../../static/img/search.png" mode=""></image>
				<view class="con">
					输入您要搜索的城市
				</view>
			</view>
			<view class="search1">
				搜索
			</view>
		</view>
		<view class="location">
			我的位置
		</view>
		<view class="qu">
			<view class="aa">
				越秀区
			</view>
		</view>
		<view class="location">
			热门城市
		</view>
		<u-index-list :scrollTop="scrollTop" >
			<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item" />
				<view class="list-cell" @click="xuanze('列表1')">
					列表1
				</view>
				<view class="list-cell" @click="xuanze('列表2')">
					列表2
				</view>
				<view class="list-cell" @click="xuanze('列表3')">
					列表3
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U",
					"V", "W", "X", "Y", "Z"
				]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			xuanze(e){
				console.log(e)
				uni.setStorageSync('city',e)
				uni.navigateTo({
					url: "/pages/index/taxi"
				});
			}
		}
	}
</script>

<style scoped>
	.top{
		background-color: #FFFFFF;
		width: 100%;
		padding: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.search{
		background-color: rgb(245,245,245);
		display: flex;
		flex-direction: row;
		width: 73%;
		align-items: center;
		border-radius: 60rpx;
	}
	.search image{
		width: 50rpx;
		height: 50rpx;
		margin-left: 3%;
	}
	.con{
		font-size: 26rpx;
		color: rgb(128,128,128);
	}
	.search1{
		width: 16%;
		margin-left: 2%;
		text-align: center;
		padding: 12rpx;
		border-radius: 16rpx;
		border: 2rpx solid rgb(223,223,223);
		background-color:  rgb(245,245,245);
	}
	.location{
		width: 100%;
		padding: 20rpx;
		font-size: 40rpx;
		color: rgb(102,102,102);
		background-color: rgb(245,245,245);
	}
	.qu{
		width: 100%;
		padding: 20rpx;
		background-color: #FFFFFF;
	}
	.aa{
		width: 18%;
		    padding: 2px;
		    text-align: center;
			border-radius: 14rpx;
		    font-size: 30rpx;
		    color: rgb(153,153,153);
		    border: 1px solid rgb(204,204,204);
	}
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	/deep/.u-index-anchor {
		background-color: #FFFFFF;
	}
</style>
